<template>
  <div class="goods-add app-container">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="商品名称" prop="goods_name">
        <el-input v-model="ruleForm.goods_name" />
      </el-form-item>

      <el-form-item label="商品描述" prop="desc">
        <el-input v-model="ruleForm.desc" />
      </el-form-item>

      <el-form-item label="商品定价" prop="price">
        <el-input v-model.number="ruleForm.price" />
      </el-form-item>

      <el-form-item label="商品库存" prop="count">
        <el-input v-model="ruleForm.count" />
      </el-form-item>

      <el-form-item label="商品类型" prop="cate">
        <el-select v-model="ruleForm.cate" clearable placeholder="商品类型">
          <el-option
            v-for="item in cates"
            :key="item._id"
            :value="item.cate_zh"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="是否热销">
        <el-switch v-model="ruleForm.hot" />
      </el-form-item>

      <!-- 文件上传功能 -->
      <el-form-item label="商品图片" prop="img">
        <ImgUpload v-model="ruleForm.img" name='uploadKey'>
          <template #tip>
            <div>商品图片限制2M以内</div>
          </template>
        </ImgUpload>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          @click="submit()"
        >
          添加商品
        </el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import { ImgUpload } from '@/components'

export default {
  name: 'GoodsAdd',
  components: {
    ImgUpload
  },

  data() {
    return {
      ruleForm: {
        goods_name: '',
        desc: '',
        price: '',
        cate: '',
        count: '',
        hot: false,
        img: ''
      },
      rules: {
        goods_name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      },
      cates: [],
      value: ''
    }
  },

  computed: {
    // 使用计算属性获取到url中的传参id
    id () {
      return this.$route.params._id || ''
    }
  },

  created() {
    this.initAdd()
    this.initEdit()
  },

  methods: {
    initAdd() {
      this.$api.getCatesList({}).then(res => {
        this.cates = res.data
      })
    },
    /**
     * 为了实现两个功能，统一使用同一个的组件
     * 功能一：点击添加商品，能够调用后端接口，进行添加商品
     * 功能二：点击修改商品信息，能够将修改后的数据反馈会后端
     * 需要后端进行判断
    */ 
    // 用于提交form表单中的数据
    submit() {
      this.$refs.ruleForm.validate(valid => {
        if (!valid) return false
        if (this.id) this.ruleForm.id = this.id

        // 这里较为巧妙，通过判断是否有id来进行添加商品和编辑商品的两种操作
        this.$api.addGoods(this.ruleForm).then(() => {
          if (this.id) {
            this.$dialog.add('编辑成功')
          } else {
            this.$dialog.add('添加成功')
          }
        })
      })
    },

    // 商品编辑，需要通过商品id获取相应的商品信息
    initEdit () {
      let id = this.$route.params._id || ''
      this.$api.getGoodsInfo({id}).then(res => {
        this.ruleForm = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.goods-add {
  .demo-ruleForm {
    width: 50%;
  }
}
</style>
